<!DOCTYPE html>
<html>

<head>
    <title>Image Slideshow</title>
    <link rel="stylesheet" href="script08.css">
    <script src="script08.js"></script>
    <style>
        body {
            background-color: #FFF;
        }
        
        .centered {
            text-align: center;
        }
        
        img#myPicture {
            width: 262px;
            height: 262px;
        }
    </style>
</head>

<body>
    <h3 class="centered">
        <img src="/assert/img/tank.jpg" id="myPicture" alt="Slideshow"><br> Use the right and left arrows on your keyboard to view the slideshow
    </h3>
    <script>
        //document.onkeydown = keyHit;
        //三个参数,第一个参数事件类型,第二个处理函数,第三个指定事件被捕获(true)还是冒泡(false)
        document.addEventListener("keydown", keyHit, false);
        var thisPic = 0;

        function keyHit(evt) {
            var myPix = new Array("/assert/img/tank.jpg", "/assert/img/tank1.jpg");
            var imgCt = myPix.length - 1;
            var ltArrow = 37;
            var rtArrow = 39;

            if (evt) {
                var thisKey = evt.which;
            } else {
                var thisKey = window.event.keyCode;
            }

            if (thisKey == ltArrow) {
                chgSlide(-1);
            } else if (thisKey == rtArrow) {
                chgSlide(1);
            }

            function chgSlide(direction) {
                thisPic = thisPic + direction;
                if (thisPic > imgCt) {
                    thisPic = 0;
                }
                if (thisPic < 0) {
                    thisPic = imgCt;
                }
                document.getElementById("myPicture").src = myPix[thisPic];
            }
        }
    </script>
</body>

</html>